<template>
  <rt-view>
    <rt-header>
      <rt-navbar hide-back>
        <rt-search
          v-focus
          v-model="queryValue"
          :autoFocus = "true"
          placeholder="按活动名称进行查询"
          @on-search="searchContent"
        ></rt-search>
        <template slot="right">
          <rt-button type="sub" text @click="cancelClick">{{
            $_t('search.cancel', '取消')
          }}</rt-button>
        </template>
      </rt-navbar>
    </rt-header>
    <rt-content ref="content">
      <rt-search-history
        v-if= "show"
        :options="options"
        :model="model"
        @click="historyClick"
      />
      <rt-list
        v-if= "!show"
        ref="fetchList"
        :fetch="fetch"
        class="cus-content"
        @toggle="toggle"
      >
        <div
          slot-scope="{ row }"
          class="account-item"
          @click="clickToDetail(row)"
        >
          <div class="card-content">
            <div class="top-img-title">
              <div class="img-info">
                <!-- <img :src="imgUrl + row.avatar" /> -->
                <img :src="showRemotePic(row.avatar)" @error="showErrorPic($event)"/>
              </div>
              <div class="title-info">{{ row.name}}</div>
            </div>
            <div class="account-content">
              <div>
                <div class="img-svg">
                  <img src="../../assets/imgs/time.png" />
                </div>
                <div class="new_time" v-if="row.start_time.substr(0,10) === row.end_time.substr(0,10)">
                  {{ row.start_time | moment('YYYY.MM.DD HH:mm') }}-{{
                    row.end_time | moment('HH:mm')
                  }}
                </div>
                <div class="new_time" v-else>
                  {{ row.start_time | moment('YYYY.MM.DD') }}-{{
                  row.end_time | moment('MM.DD')
                  }}
                </div>
              </div>
              <div v-if="row.province !== ''&& row.province !== null">
                <div class="img-svg">
                  <img src="../../assets/imgs/location.png" />
                </div>
                <div class="new_address">
                  {{ row.province }}{{ row.city }}{{ row.area
                  }}{{ row.address }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </rt-list>
    </rt-content>
  </rt-view>
</template>

<script>
import { store, mapMutations } from 'vuex';

import { mapState } from 'vuex';
import rtSearchHistory from './searchCampaignHistory';
export default {
  name: 'searchCampaign',
  components: {
    rtSearchHistory
  },
  filters: {
    nameStyle(value) {
      if (!value) return '';
      if (value.length > 15) {
        return value.slice(0, 15) + '...';
      }
      return value;
    }
  },
  data() {
    return {
      show: true,
      count: 0,
      queryValue: '',
      // placeholder: '',
      showHistory: true,
      options: JSON.parse(localStorage.getItem('campaign-history')) || [],
      // 活动搜索列表所用到的属性
      // imgUrl: process.env.HOST_URL + 'img/',
      name: '',
      id: '',
      pageIndex: 0,
      borderWidth: '2px',
      color: '#888',
      selectColor: '#53A4FC'
    };
  },
  computed: {
    ...mapState({
      placeholder: state => state.search.searchparams.placeholder,
      model: state => state.search.searchparams.entityName,
      entityNames: state => state.search.searchparams.entityNames,
      config: state => state.search.searchparams.config
    })
  },
  mounted() {
    this.options =
      JSON.parse(localStorage.getItem('campaign-history')) || [];
    this.$bus.$on('campaign-updated', this.onModelUpdated);
  },
  destroyed() {
    this.$bus.$off('campaign-updated', this.onModelUpdated);
  },
  methods: {
    ...mapMutations(['setSearchPageInfo', 'updateQueryValue']),
    onModelUpdated() {
      this.$refs.list.loadData();
    },
    historyClick(queryValue) {
      this.name = this.queryValue = queryValue;
      // this.$refs['fetchList'].refreshData(1);
      this.queryList();
      // this.show = false;
    },
    searchContent(queryValue) {
      var patt = /^[\s]*$/;
      var pvalue = patt.test(queryValue);
      this.queryValue = queryValue;
      if(!pvalue){
        this.name = queryValue;
        //  1. 存储搜索历史
        this.saveToHistory(queryValue);
        //  2. 查询数据，根据历史页是否存在来选择查询数据的方式，存在则显示列表页同时刷新，不存在则只刷新列表页
        if(this.show){
          this.show = false;
        } else {
          this.$refs['fetchList'].refreshData(1);
        }
      }else {
        this.show = true;
      }
    },
    saveToHistory(queryValue) {
      //  1. 存储搜索历史
      if (queryValue) {
        this.showHistory = false;
        this.options.push(queryValue);
        this.options = this.options.filter((element, index, self) => {
          return self.indexOf(element) === index;
        });
        if (this.options.length > 10) {
          this.options.splice(0, 1);
        }
        localStorage.setItem(
          'campaign-history',
          JSON.stringify(this.options)
        );
      } else {
        this.showHistory = true;
      }
    },
    queryList() {
      this.show = false;
    },
    cancelClick() {
      this.$router.back();
    },

    // 活动搜索所用到的方法
    fetch(page) {
      // console.log(this.$route.query.name);
      return this.getDataList(page).then(resp => {
        return resp;
      });
    },
    getDataList(page) {
      return new Promise(resolve => {
        const data = {
          pageIndex: page.pageIndex,
          pageSize: page.pageSize,
          name: this.name
        };
        rt.get('/api/bbs/campaign/listappcampaign', data).then(res => {
          resolve(res);
        });
      });
    },
    clickToDetail(row) {
      this.$router.push({
        name: 'campaign-detail',
        query: { id: row.bbs_campaignid }
      });
    },
    toggle(showHeader) {
      this.showHeader = showHeader;
      this.$refs.content.resizeStyle();
    },
    showRemotePic(name){
      return rt.showRemotePic(name);
    },
    showErrorPic(e){
      rt.showErrorPic(e);
    }
  }
};
</script>
<style lang="less" scoped>
.rt-navbar .rt-navbar-right .rt-btn-sub.is-text {
  color: #888;
}
// 活动搜索列表所用的属性
.cus-content {
  .account-item {
    padding: 0 10px;
    .card-content {
      background-color: #ffffff;
      width: 100%;
      border-radius: 10px;
      box-shadow:2px 2px 6px 2px rgba(20,62,129,0.1);
      text-align: center;
      .top-img-title {
        .img-info {
          border-radius: 10px 10px 0 0;
          position: relative;
          height: 163px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
            margin: 0 auto;
          }
        }
        .title-info {
          //bottom: 50px;
          //position: relative;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          font-weight: bold;
          //color: #fff;
          text-align: left;
          font-size: 17px;
          padding: 10px 15px 0 20px;
        }
      }
    }
    .account-content {
      margin: 10px 0 10px 20px;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      text-align: left;
      .img-svg {
        width: 16px;
        height: 16px;
        float: left;
        margin-right: 5px;
        margin-top: -0.8px;
      }
      .new_time {
        //display: inline;
        color: #555;
        font-size: 13px;
        padding-bottom: 5px;
      }
      .new_address {
        color: #555;
        padding-bottom: 10px;
        font-size: 13px;
      }
    }
  }
}
</style>
